<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <title>选择优惠券</title>
    <link rel="stylesheet" href="../../css/reset.css" />
    <style>
        body {
            width: 100%;
            background-color: #F8F8F8;
            font-family: Helvetica;
            color: #333333;
            font-size: 0.28rem;
            font-family: PingFang SC;
        }

        .couponListBox {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            justify-content: flex-start;
            padding: 0 0.3rem;
            box-sizing: border-box;
        }

        .couponListBox>li {
            margin-bottom: 0.2rem;
            border-radius: 0.1rem;
            overflow: hidden;
        }

        .couponListBox>li label {
            display: block;
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            align-items: stretch;
            background-color: #fff;
            padding-left: 0.17rem;
            box-sizing: border-box;
        }

        .couponListBox>li label>p {
            width: 0.46rem;
            box-sizing: border-box;
            padding-top: 0.45rem;
        }

        .bgImgcontant {
            height: 1.58rem;
            flex: 1;
        }

        .bgImgcontant ul {
            width: 100%;
            height: auto;
            padding: 0.14rem 0.26rem 0 0.26rem;
            box-sizing: border-box;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
        }

        .bgImgcontant li {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.22rem;
        }

        .bgImgcontant li:first-of-type {
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
        }

        .bgImgcontant li:first-of-type p:last-of-type {
            font-size: 0.4rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(246, 116, 18, 1);
        }

        .bgImgcontant li:first-of-type p:last-of-type span {
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(246, 116, 18, 1);
        }

        .couponUseText {
            display: flex;
            display: -webkit-flex;
            align-items: center;
        }

        .couponUseText>img {
            width: 1.14rem;
            margin-left: 0.1rem;
        }

        .bgImgcontant li:not(:last-of-type) p:last-of-type {
            color: #F67311;
        }

        .bgImgcontant li:nth-of-type(2) {
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(154, 154, 154, 1);
        }

        .bgImgcontant li:last-of-type {
            font-size: 0.2rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(154, 154, 154, 1);
            margin-top: 0.05rem;
        }

        input[type='radio'] {
            width: 0.36rem;
            height: 0.36rem;
            background-color: #fff;
            -webkit-appearance: none;
            border: 1px solid #c9c9c9;
            outline: none;
            border-radius: 50%;
        }

        input[type=radio]:checked {
            width: 0.36rem;
            height: 0.36rem;
            background: url("../../image/iconxuangousuanlibao.png")no-repeat center;
            background-size: 100% 100%;
        }

        /* 不能使用折扣卷 */
        .usedUpbgcontant {
            flex: 1;
            height: 1.58rem;
            color: rgba(212, 210, 212, 1);
        }

        .usedUpbgcontant ul {
            width: 100%;
            height: auto;
            padding: 0.14rem 0.26rem 0 0.26rem;
            box-sizing: border-box;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
        }

        .usedUpbgcontant li {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.22rem;
        }

        .usedUpbgcontant li:first-of-type {
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 500;
        }

        .usedUpbgcontant li:first-of-type p:last-of-type {
            font-size: 0.4rem;
            font-family: PingFang SC;
            font-weight: bold;
        }

        .usedUpbgcontant li:first-of-type p:last-of-type span {
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
        }

        .usedCouponUseText {
            display: flex;
            display: -webkit-flex;
            align-items: center;
        }

        .usedUpbgcontant li:nth-of-type(2) {
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: 500;
        }

        .usedUpbgcontant li:last-of-type {
            font-size: 0.2rem;
            font-family: PingFang SC;
            font-weight: 400;
            margin-top: 0.05rem;
        }

        .fixButtom {
            width: 100%;
            height: auto;
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #fff;
        }

        .fixButtom>p {
            width: 100%;
            height: 0.6rem;
            line-height: 0.6rem;
            background-color: #FDFAEF;
            color: #D5A429;
            text-align: center;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 0.24rem;
        }

        .downBoottom {
            width: 100%;
            height: 1rem;
            display: flex;
            display: -webkit-flex;
            align-items: stretch;
        }

        .downBoottom p,
        .downBoottom button {
            display: flex;
            display: -webkit-flex;
            align-items: center;
        }

        .downBoottom p {
            flex: 1;
            justify-content: flex-start;
            padding-left: 0.3rem;
            box-sizing: border-box;
            font-size: 0.22rem;
            color: #a9a9a9;
            align-items: stretch;
        }

        .downBoottom p>span {
            display: flex;
            display: -webkit-flex;
            align-items: center;
        }

        .downBoottom p>span:last-of-type {
            color: #F67412;
            font-size: 0.24rem;
        }

        .downBoottom p>span:last-of-type span {
            font-size: 0.32rem;
            margin-left: 0.1rem;
        }

        .downBoottom button {
            width: 2rem;
            height: 100%;
            justify-content: center;
            outline: none;
            border: none;
            background-color: #ffd203;
            color: #181818;
            font-size: 0.26rem;
        }
    </style>
</head>

<body>
    <div class="useCouponList" style="padding-bottom:2rem;">
        <ul class="couponListBox" style="margin-top: 0.2rem;">
            <!-- <li>
                <label for="chooseInput">
                    <p>
                        <input type="radio" name="couponList" id="chooseInput">
                    </p>
                    <div class="bgImgcontant">
                        <ul>
                            <li>
                                <p class="couponUseText">
                                    邀请好友注册券 <img src="../../image/jijiangdaoqix.png" alt="">
                                </p>
                                <p>
                                    100 <span>CNY</span>
                                </p>
                            </li>
                            <li>
                                <p>
                                    有效期至 2020.06.20 23:59
                                </p>
                                <p>
                                    满XX可用
                                </p>
                            </li>
                            <li>
                                <p>

                                </p>
                                <p>
                                    XX USDT,满XX可用
                                </p>
                            </li>
                        </ul>
                    </div>
                </label>
            </li>
            <li>
                <label for="chooseInput12">
                    <p>
                        <input type="radio" name="couponList" id="chooseInput12">
                    </p>
                    <div class="usedUpbgcontant">
                        <ul>
                            <li>
                                <p class="usedCouponUseText">
                                    邀请好友注册券
                                </p>
                                <p>
                                    100 <span>CNY</span>
                                </p>
                            </li>
                            <li>
                                <p>
                                    有效期至 2020.06.20 23:59
                                </p>
                                <p>
                                    满XX可用
                                </p>
                            </li>
                            <li>
                                <p>

                                </p>
                                <p style="position: relative;">
                                    XX USDT,满XX可用
                                    <img src="../../image/weidashiyongmenx.png"
                                        style="position: absolute;left: -1.1rem;top:-0.94rem;width: 0.94rem;">
                                </p>
                            </li>
                        </ul>
                    </div>
                </label>
            </li> -->
        </ul>
    </div>
    <div id="listState" style="text-align: center;margin: auto;color: #666666;margin-top:30%;display: none;">
        <img src="../../image/nocoupon.png" style="width: 2.08rem;">
        <p
            style="font-size:0.3rem;font-family:PingFang SC;font-weight:400;color:rgba(138,138,138,1);margin-top: 0.2rem;">
            暂无优惠券~
        </p>
    </div>
    </div>
    <div class="fixButtom">
        <p>
            本单最多可抵扣<span style="margin-right:0.1rem;" class="disMaxNum">xx</span>
        </p>
        <div class="downBoottom">
            <p>
                <span>
                    已选择: <span class="paperNum">0</span>张,
                </span>
                <span>
                    可抵扣<span class="disTotalMoney">0 CNY</span>
                </span>
            </p>
            <button class="srueChooseList">
                确认使用
            </button>
        </div>
    </div>
</body>
<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/dotmin.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var account = app.getAccount();
        var curpage = 1;//当前页
        var totalPage = 0;//总页数
        var chooseCoupon = [];//保存选择优惠券金额数组
        var chooseCouponId = [];//选择优惠券ID
        var chooseCouponUsdt = [];//选择优惠券USDT
        var chooseCouponMony = 0;//选择优惠券总金额CNY
        var chooseCouponMonyUsdt = 0;//选择优惠券总金额USDT
        var rentNum = api.pageParam.rentNum;//用户租用份额
        var totalMoney = app.accMul(api.pageParam.unitMoney, rentNum);//上一页选择的总金额CNY
        var totalMoneyUsdt = app.accMul(api.pageParam.unitMoneyUsdt, rentNum);;//上一页选择的总金额USDT
        var payMethod = api.pageParam.payMethod;//上一页选择的支付方式
        var preferentialRate = api.pageParam.preferentialRate;//优惠比例
        var maxDischare = app.accMul(totalMoney, preferentialRate);//最大折扣钱数CNY
        var maxDischareUsdt = app.accMul(totalMoneyUsdt, preferentialRate);//最大折扣数USDT
        var textChooseCou = 0, textChooseCouUsdt = 0;//保存最大折扣数据
        var storeObj = app.getSyncStorage("chooseCouponStore");
        var storeArr = [];//获取储存在本地选中ID
        if (payMethod == "CNY") {
            $(".disMaxNum").text(maxDischare + payMethod);
        } else {
            $(".disMaxNum").text(maxDischareUsdt + payMethod);
        }
        if (!storeObj) {
            app.setStorage("chooseCouponStore", {
                chooseId: [],
                chooseMonyCny: 0,
                chooseMonyUsdt: 0
            });
            storeObj = app.getSyncStorage("chooseCouponStore");
        } else {
            storeArr = JSON.parse(storeObj).chooseId;
            chooseCouponId = storeArr;
            $(".paperNum").text(storeArr.length);
            chooseCouponMonyUsdt = JSON.parse(storeObj).chooseMonyUsdt;
            textChooseCouUsdt = chooseCouponMonyUsdt;
            chooseCouponMony = JSON.parse(storeObj).chooseMonyCny;
            textChooseCou = chooseCouponMony;
            if (payMethod == "USDT") {
                $(".disTotalMoney").text(JSON.parse(storeObj).chooseMonyUsdt + payMethod);
            } else {
                $(".disTotalMoney").text(JSON.parse(storeObj).chooseMonyCny + payMethod);
            }
        }
        // console.log("-------------------" + JSON.stringify(storeArr));
        //可用优惠券列表
        function couponList(account, page, isdown) {
            app.ajaxPro({
                url: "coupon/list",
                values: {
                    token: account.token,
                    currencyCode: "",
                    type: 1,
                    status: 1,//  （1未使用 2已使用 3已过期）不传 查所有
                    page: page
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    var dataList = ret.data.lists;
                    totalPage = ret.data.totalPage;
                    dataList.map(function (item) {
                        for (var i = 0; i < storeArr.length; i++) {
                            if (storeArr[i] == item.id) {
                                item.checkInput = true;
                            }
                        }
                        if (Number(item.confMap.CNY.cond) <= Number(totalMoney) && payMethod == "CNY") {
                            item.isNocheck = true;
                        }
                        if (item.confMap.USDT && Number(item.confMap.USDT.cond) <= Number(totalMoneyUsdt) && payMethod == "USDT") {
                            item.isNocheck = true;
                        }
                    })
                    var temp = doT.template($("#couponListLi").text());
                    if (isdown) {
                        $(".couponListBox").html(temp(dataList));
                    } else {
                        $(".couponListBox").append(temp(dataList));
                    }
                    if (page == 1 && dataList.length == 0) {
                        $("#listState").show();
                    } else {
                        $("#listState").hide();
                    }
                } else {
                    app.toast(ret.message)
                }
            })
        }
        couponList(account, curpage, true);
        //下拉刷新
        app.downRefresh(function () {
            $(".couponListBox").empty();
            curPage = 1;
            totalPage = 0;
            couponList(account, curpage, true);
        });
        // 监听滚动到底部 加载更多
        app.toBottom(function () {
            if (curpage < totalPage) {
                curpage++;
                couponList(account, curpage, false);
            }
        })

        $(".couponListBox").on("click", "li", function (params) {
            var numberList = $("input:radio[name=couponList]:checked").length;
            $(".paperNum").text(numberList);
            chooseCoupon.length = 0, chooseCouponId.length = 0, chooseCouponUsdt.length = 0, chooseCouponMony = 0, chooseCouponMonyUsdt = 0, textChooseCou = 0, textChooseCouUsdt = 0;
            $("input:radio[name=couponList]:checked").each(function () {
                if ($(this).is(':checked')) {
                    chooseCoupon.push($(this).attr("data-cnyNum"));
                    chooseCouponUsdt.push($(this).attr("data-usdtNum"));
                    chooseCouponId.push($(this).attr("data-orderId"));
                }
            });
            if (chooseCoupon.length > 0) {
                //遍历CNY
                for (var i = 0; i < chooseCoupon.length; i++) {
                    chooseCouponMony = app.accAdd(chooseCouponMony, chooseCoupon[i]);
                }
                ////遍历USDT
                for (var i = 0; i < chooseCouponUsdt.length; i++) {
                    chooseCouponMonyUsdt = app.accAdd(chooseCouponMonyUsdt, chooseCouponUsdt[i]);
                }
            }
            textChooseCou = chooseCouponMony, textChooseCouUsdt = chooseCouponMonyUsdt;
            if (payMethod == "USDT") {
                $(".disTotalMoney").text(chooseCouponMonyUsdt + payMethod);
            } else {
                $(".disTotalMoney").text(chooseCouponMony + payMethod);
            }
        })
        $(".srueChooseList").click(function () {
            // if (chooseCouponId.length <= 0) {
            //     app.toast('请选择优惠券');
            //     return;
            // }
            if (maxDischareUsdt < chooseCouponMonyUsdt && payMethod == "USDT") {
                var param = {
                    dtype: "dialog77",
                    data: {
                        maxDischare: maxDischareUsdt + "USDT",
                        chooseCouponMony: chooseCouponMonyUsdt + "USDT"
                    },
                };
                textChooseCou = maxDischare;
                textChooseCouUsdt = maxDischareUsdt;
                app.dialog(param);
                return
            }
            if (maxDischare < chooseCouponMony && payMethod == "CNY") {
                var param = {
                    dtype: "dialog77",
                    data: {
                        maxDischare: maxDischare + "CNY",
                        chooseCouponMony: chooseCouponMony + "CNY"
                    },
                };
                textChooseCou = maxDischare;
                textChooseCouUsdt = maxDischareUsdt;
                app.dialog(param);
                return
            }
            app.trigger("dalogSrue");
        })
        app.listen("dalogSrue", function () {
            // console.log("----------" + JSON.stringify({
            //     chooseId: chooseCouponId,
            //     chooseMonyCny: chooseCouponMony,
            //     chooseMonyUsdt: chooseCouponMonyUsdt
            // }) + "****" + JSON.stringify({
            //     chooseCouponMony: textChooseCou,
            //     chooseCouponMonyUsdt: textChooseCouUsdt,
            //     chooseCouponId: chooseCouponId
            // }))
            // return
            app.setStorage("chooseCouponStore", {
                chooseId: chooseCouponId,
                chooseMonyCny: chooseCouponMony,
                chooseMonyUsdt: chooseCouponMonyUsdt
            });
            app.trigger("chooseListInput", {
                chooseCouponMony: textChooseCou,
                chooseCouponMonyUsdt: textChooseCouUsdt,
                chooseCouponId: chooseCouponId
            })
            setTimeout(function () {
                app.closeW();
            }, 1500)
        })
    }
</script>
<!-- 可使用优惠券列表 -->
<script type="text/html" id="couponListLi">
    {{~it:it:index}}
        {{?it.isNocheck == true}}
        <li>
            <label for="chooseInput{{=index}}">
                <p>
                    <input type="radio" {{?it.checkInput==true}} checked {{?}} name="couponList" id="chooseInput{{=index}}" data-orderId={{=it.id}} data-cnyNum={{=it.confMap.CNY.dis}}  data-usdtNum={{=it.confMap.USDT.dis}}>
                </p>
                <div class="bgImgcontant">
                    <ul>
                        <li>
                            <p class="couponUseText">
                                {{=it.couponName}} 
                                {{?it.expire==1}}
                                    <img src="../../image/jijiangdaoqix.png" alt="">
                                {{?}}
                            </p>
                            <p>
                                {{=it.confMap.CNY.dis}} <span>CNY</span>
                            </p>
                        </li>
                        <li>
                            <p>
                                有效期至 {{=it.expiryTime}}
                            </p>
                            <p>
                                {{?it.type==1}}
                                    满{{=it.confMap.CNY.cond}}可用
                                {{?}}
                            </p>
                        </li>
                        <li>
                            <p>
                                {{?it.type==1}}
                                <!-- 优惠券 -->
                                    <img src="../../image/dikouquanx.png" style="width:0.82rem">
                                {{??}}
                                    <img src="../../image/xianjinquanx.png" style="width:0.82rem">
                                {{?}}
                            </p>
                            <p>
                                {{?it.confMap.USDT && it.type ==1}}
                                    {{=it.confMap.USDT.dis}} USDT,满{{=it.confMap.USDT.cond}}可用
                                {{?}}
                            </p>
                        </li>
                    </ul>
                </div>
            </label>
        </li>
        {{??}}
        <li>
            <label for="chooseInput12">
                <p style="display:none;">
                    <input type="radio" name="couponListnew" id="chooseInput12">
                </p>
                <div class="usedUpbgcontant">
                    <ul>
                        <li>
                            <p class="usedCouponUseText">
                                {{=it.couponName}}
                            </p>
                            <p>
                                {{=it.confMap.CNY.dis}} <span>CNY</span>
                            </p>
                        </li>
                        <li>
                            <p>
                                有效期至 {{=it.expiryTime}}
                            </p>
                            <p>
                                {{?it.type==1}}
                                    满{{=it.confMap.CNY.cond}}可用
                                {{?}}
                            </p>
                        </li>
                        <li>
                            <p>
                                {{?it.type==1}}
                                    <img src="../../image/dikouquanximg.png" style="width:0.82rem">
                                {{??}}
                                    <img src="../../image/xianjinquanximg.png" style="width:0.82rem">
                                {{?}}
                            </p>
                            <p style="position: relative;">
                                {{?it.confMap.USDT}}
                                    {{=it.confMap.USDT.dis}} USDT,满{{=it.confMap.USDT.cond}}可用
                                {{?}}
                                <img src="../../image/weidashiyongmenx.png" style="position: absolute;left: -1.1rem;top:-0.94rem;width: 0.94rem;">
                            </p>
                        </li>
                    </ul>
                </div>
            </label>
        </li>
        {{?}}
    {{~}}
</script>

</html>